<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>sama赞赏社注册页</title>
    <link rel="stylesheet" href="/static/css/bootstrap/bootstrap.min.css">
    <script src="/static/js/jquery-3.2.1.js"></script>
    <script src="/static/js/bootstrap/bootstrap.min.js"></script>
    <script src="/static/js/qiniu/plupload.full.min.js"></script>
</head>
<style>
    .title {
        text-align: center;
    }

    .register-info {
        margin-bottom: 20px;
        text-align: center;
    }

    .register-info > img {
        height: 80px;
        width: 80px;
        border-radius: 50%;
    }

    label {
        font-weight: normal;
    }

    .tip {
        margin-bottom: 0;
        color: #FFB0A9;
    }

    .form-control {
        box-shadow: 0;
        -webkit-box-shadow: 0;
    }

    .form-control:focus {
        border: 1px solid #FFB0A9;
    }


</style>
<body>

<div class="container">
    <h4 class="title">注册</h4>
    <hr style="margin: 0 0 20px 0;">
    <form class="form-horizontal" role="form" style="margin-bottom: 80px;">
        <div class="form-group register-info">
            <img id="addAvatar" src="/static/img/defaultAvatar.png">
        </div>
        <div class="form-group">
            <label for="name" class="col-xs-2 col-sm-2 control-label" style="padding-right: 0;">昵称</label>
            <div class="col-xs-10 col-sm-10" style="padding-left: 5px;">
                <input type="text" class="form-control" name="nickname" id="name" placeholder="请输入昵称">
            </div>
        </div>
        <div class="form-group">
            <label for="name" class=" col-xs-2 col-sm-2 control-label"
                   style="padding-right: 0;margin-top: 10px;">性别</label>
            <div class="col-xs-10 col-sm-10" style="padding-left: 5px;">
                <label class="radio-inline">
                    <input type="radio" name="sex" id="man" value="1" checked>男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" value="2" id="woman">女
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" value="0" id="sex">你猜
                </label>
                <p class="help-block tip">注意：用户昵称和性别终身只能设置一次。</p>
            </div>
        </div>


        <div class="form-group">
            <label for="phone" class="col-xs-2 col-sm-2 control-label" style="padding-right: 0;">手机号</label>
            <div class="col-xs-10 col-sm-10" style="padding-left: 5px;">
                <input type="text" class="form-control" name="mobile" id="phone" placeholder="请输入手机号">
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="col-xs-2 col-sm-2 control-label" style="padding-right: 0;">密码</label>
            <div class="col-xs-10 col-sm-10" style="padding-left: 5px;">
                <input type="password" class="form-control" name="password" id="inputPassword" placeholder="请输入密码">
            </div>
        </div>
        <div class="form-group">
            <label for="phone" class="col-xs-2 col-sm-2 control-label" style="padding-right: 0;">验证码</label>
            <div class="col-xs-6 col-sm-6" style="padding-left: 5px;">
                <input type="text" class="form-control" name="verify_code" id="v-code" placeholder="请输入验证码">
            </div>
            <div class="col-xs-4 col-sm-4" style="padding-left: 5px;">
                <input type="button" id="get-code" value="获取验证码"/>
            </div>
        </div>
        <div class="form-group" style="text-align: center;">
            <input type="button" class="register btn btn-default" value="确认注册"/>
        </div>
    </form>
    <div id="box1">2</div>

    <div class="footer" style="text-align: center;">
        <nav class="navbar navbar-default navbar-fixed-bottom">
            <div class="navbar-inner navbar-content-center">
                <p class="text-muted credit" style="padding: 5px; margin: 0;">
                    注册即代表你同意 <a href="/index/Index/samaregister" style="color: #FFB0A9;">用户注册协议</a>
                    <br>
                    如注册失败请添加官方群521354831寻求帮助
                </p>
            </div>
        </nav>
    </div>
</div>


<script type="text/javascript">
    var wait = 60;

    function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");
            o.value = "获取验证码";
            wait = 60;
        } else {
            o.setAttribute("disabled", true);
            o.value = "重新发送(" + wait + ")";
            wait--;
            setTimeout(function () {
                    time(o)
                },
                1000)
        }
    }

    var yzm = document.getElementById("get-code");

    // Custom example logic
    var uploader = new plupload.Uploader({
        runtimes: 'html5',
        browse_button: 'addAvatar', //触发文件选择对话框的按钮，为那个元素id
        url: 'http://up.qiniu.com/', //服务器端的上传页面地址
        flash_swf_url: '/static/js/qiniu/Moxie.swf',
        silverlight_xap_url: '/static/js/qiniu/Moxie.xap',
        filters: {
            // 设置大小
            max_file_size: '10mb',
            // 允许上传的类型
            mime_types: [
                // {title : "Image files", extensions : "png,jpeg,gif,bmp,jpg"},
            ]
        },
        multipart: true,
        //设置post传给七牛的token 设置的token 直接生成 设置时间为10年 计算方式为 Unix时间戳后面添加几个0 这样不需调用后端代码生成token 时间不宜过大过大会出问题
        multipart_params: {
            'token': 'saWbg0EFS4o0WBKBhMBXzweR3LnFJfH6aLy0i_pk:so3hTrgcMtWpSAKfMI-mQWooi_k=:eyJzY29wZSI6InFpYW5nIiwiZGVhZGxpbmUiOjE1MDc3MDg0NTcwMH0=',
        },
        //修改post字段为七牛的file
        file_data_name: 'file',
        init: {
            //初始化七牛
            PostInit: function () {
//                document.getElementById('saveAvatar').innerHTML = '';
            },
            //选择文件后会调用此函数
            FilesAdded: function (up, files) {
                //选择文件后直接上传， 或可改成点击按钮上传
                uploader.start();
            },
            //上传过程中的回调
            UploadProgress: function (up, file) {

            },
            //每一个文件上传成功后都会回调此函数，通过此函数像代码中添加img显示
            FileUploaded: function (up, file, info) {
                var res = info.response;
                console.log(res)
                var r = eval('(' + res + ')');
                console.log(r);
                document.getElementById('addAvatar').src = 'http://osigyjh92.bkt.clouddn.com/' + r.key;
            },
            //上传结束后会调用此函数
            UploadComplete: function (up, files) {
                // Called when all files are either uploaded or failed
                // console.log('[完成]');
            },
            Error: function (up, err) {
                // alert(err.response);
            }
        }
    });


    //初始化整个upload
    uploader.init();

    $('.register').click(function () {

        var headimgurl = $('#addAvatar')[0].src;
        var nickname = $("input[name='nickname']").val();
        var sex = $("input:radio[name='sex']:checked").val();
        var mobile = $("input[name='mobile']").val();
        var password = $("input[name='password']").val();
        var verify_code = $("input[name='verify_code']").val();
        $.ajax({
            url: '/index/Index/getUserRegisterInfo',
            type: 'post',
            data: {headimgurl: headimgurl,nickname:nickname,sex:sex,mobile:mobile,password:password,verify_code:verify_code},
            success: function (r) {
                if (r.code == 1) {
                    alert(r.msg);
                } else {
                    alert(r.msg);
                    setTimeout("javascript:location.href='/index/Index/selectOpera'", 1);
                }
            }
        })

    })

    $('#get-code').click(function () {

        var mobile = $('#phone').val();
        console.log(mobile);
        if (mobile.length != 11 || !(/1(3[0-9]|47|5((?!4)[0-9])|7(0|1|[6-8])|8[0-9])\d{8,8}/.test(mobile))) {
            alert('手机号不正确');
        } else {
            $.ajax({
                url: '/index/Index/sendVerifyCode',
                type: 'post',
                data: {mobile: mobile},
                success: function (r) {
                    if (r.code == 1) {
                        $("#box1").html(r.msg);
                    } else {
                        time(yzm);
                        $("#box1").html(r.msg);
                    }
                }
            })
        }


    })


</script>

</body>
</html>